<template>
	<view>
		<!-- <view :class="isOpenModal?'fixed':''"> -->
		<view>
			<view style="position: fixed;left:0;right:0;z-index: 999;">
				<billInput ref="refBill" optType="PUTAWAY" :readonly="true" :muiltSelect="false" v-model="bill" @confirm="onBillKeyEnter"></billInput>
				<view class="cu-form-group">
					<view class="title">储位</view>
					<input placeholder="" v-model="storeNum" :disabled="true" name="input"  />
					<button  class="cu-btn bg-gray" @click="onClearStore">切换</button>
				</view>
				<todo-input v-model="todoNum"  @confirm="onConfirmTodo" :focus="todoFocus" @focusChange="onTodoFocusChange"></todo-input>
				
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange"></text>
						物料列表
					</view>
				</view>
			</view>

			
			<my-list-viewer ref="refTodo" height="100%" style="width:100%" :i="-1" :down="{ use: false }" width="100%" :top="460" @loadData="onLoadTodo">
				<view class="cu-list menu">
					<view v-for="(item, idx) in todoList" class="cu-item">
						<view class="content padding-tb-sm">
							<view>
								<text class="cuIcon-formfill text-blue margin-right-xs"></text>
								<text>PKG:</text>
								{{ item.pkg_id }}
							</view>
							<view class="text-gray text-sm">
								<text class="lg text-gray cuIcon-settingsfill"></text>
								<text>单号:</text>
								{{ item.bill_id }}
							</view>
							<view class="text-gray text-sm">
								<text class="lg text-gray cuIcon-settingsfill"></text>
								<text>料号:</text>
								{{ item.part_id }}
							</view>
						</view>
						<view class="action">
							<view class="text-grey text-xs">
								<text class="text-gray">数量:</text>
								{{ item.pkg_qty }}
							</view>
							<!-- <view class="text-gray  text-xs">
								<text class="text-gray">应理:</text>
								{{ item.plan_qty }}
							</view> -->
						</view>
					</view>
				</view>
			</my-list-viewer>
		</view>
	</view>
</template>

<script>
import api from '@/serveices/wms-api.js';
import billInput from './bill-input.vue';
import todoInput from './todo-input.vue'
import util from '@/serveices/util.js'
export default {
	components: { billInput,todoInput },
	data() {
		return {
			bill:'',
			todoList: [],
			todoNum:'',
			todoFocus:true,
			storeNum:''
		};
	},
	methods: {
		onTodoFocusChange(focus){
			
			this.todoFocus = focus
		},
		onBillKeyEnter({ bill }) {
			this.checkBillAndGetToDoList(bill);
		},
		onConfirmTodo(){
			if(!this.storeNum){
				// 储位为空 扫描内容作为储位处理
				api.checkbin(this.todoNum).then(r=>{
					this.storeNum = r.data.bin_id
					this.todoNum = ''
					util.playSuccess()
				}).catch(err=>{
					this.todoNum = ''
					util.playFailed()
				})
			}else{
				api.putaway(this.storeNum,this.todoNum).then(res=>{
					//刷新列表
					// if(res.data.pkglist.length){
					// 	// 使用
					// 	const bill = res.data.pkglist[0].bill_id||this.bill
					// 	this.$refs.refBill.setValueAndTriggerEnter(bill)
					// }
					this.todoList = res.data.pkglist
					this.todoNum = ''
					util.playSuccess()
				}).catch(err=>{
					this.todoNum = ''
					util.playFailed()
				})
			}
		},
		checkBillAndGetToDoList(bill) {
			// 查询一个校验单号是否ok
			api.needputaway(bill,1,1).then(res=>{
				// 成功则刷新列表
				this.$refs.refTodo.resetUpScroll()
				//
				this.$refs.refBill.lock()
				
				this.todoFocus = true
			}).catch(err=>{
				this.todoList = [];
				this.$refs.refBill.clear()
				
				this.todoFocus = true
			})
		},
		onLoadTodo(page) {
			const refBill = this.$refs.refBill;
			return api
				.needputaway(refBill.bill, page.num, page.size)
				.then(res => {
					const pageData = res.data.pkglist;
					this.$refs.refTodo.endSuccess(pageData.length);
					//设置列表数据
					if (page.num == 1) this.todoList = []; //如果是第一页需手动制空列表
					this.todoList = this.todoList.concat(pageData); //追加新数据

				})
				.catch(() => {
					this.$refs.refTodo.endErr();
				});
		},
		onClearStore(){
			this.storeNum = ''
		}
	},
	beforeMount() {}
};
</script>

<style>
.fixed {
	position: fixed;
}
</style>
